<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/commons/global.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <%@ include file="/commons/basejs.jsp" %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>专题管理</title>
    <script type="text/javascript">
        //定义页面有个的分类
        var typeStr = '0,1,2';
        var selectLocId;
        var selectCityId;


        function formatterImg(value) {
            if (value != null) {
                return '<img height="25px" src="' + value + '" alt="" />';
            } else {
                return '';
            }

        }
        function reloadSpecialDataGrid() {
            console.log("reload");
            $('#specialDataGrid').datagrid('reload');
        }
        function reloadLocDataGrid() {
            console.log("Loc--reload");
            $('#locDataGrid').datagrid('reload');
        }

        var cityTreeGrid;
        var locDataGrid;
        var specialDataGrid;
        $(function () {
            var treeRowId;
            cityTreeGrid = $('#cityTreeGrid').treegrid({
                url: '${path }/areaInfo/cityTreeGrid.do',
                idField: 'id',
                treeField: 'name',
                parentField: 'parentId',
                fit: true,
                fitColumns: false,
                border: false,

                columns: [[{
                    field: 'name',
                    title: '区域名',
                    width: 150
                }]],
                onClickRow: function (node) {//运用单击事件实现一行的编辑结束，在该事件触发前会先执行onAfterEdit事件
                    console.log("node:" + node.id);

                    selectCityId = node.id;
                    $('#specialDataGrid').datagrid('clearSelections');
                    specialSearch();
                    /*locSearch();*/
                },
                onLoadSuccess: function (node, data) {
                    console.log("data[0].id" + data[0].id);
                    loadLocDataGrid();
                }
            });
        });

        function loadLocDataGrid(id) {
            if (id == undefined) {
                id = '';
            }
            console.log("--loadLocDataGrid--id:" + id);
            locDataGrid = $('#locDataGrid').datagrid({
                url: '${path }/special/locDataGrid.do?cityId=' + id+'&typeValue='+typeStr,
                striped: true,
                rownumbers: true,
                pagination: true,
                singleSelect: true,
                idField: 'id',
                pageSize: 20,
                pageList: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500],
                frozenColumns: [[{
                    width: '40',
                    title: 'id',
                    field: 'id',
                    sortable: true
                }, {
                    width: '80',
                    title: '位置名',
                    field: 'name'
                }, {
                    width: '80',
                    title: '平台',
                    field: 'platform',
                    formatter: function (value, row, index) {
                        if (value == 0) {
                            return '手机WAP';
                        } else if (value == 1) {
                            return 'PC';
                        } else {
                            return 'APP'
                        }
                    }
                }, {
                    width: '80',
                    title: '分类',
                    field: 'type',
                    formatter: function (value, row, index) {
                        if (value == 0) {
                            return '轮播图';
                        } else if (value == 1) {
                            return '分类';
                        } else {
                            return '专题'
                        }
                    }
                }, {
                    width: '50',
                    title: '排序',
                    field: 'ord'
                }]],
                onClickRow: function (index, row) {
                    console.log(row.id);
//                    loadSpecialDataGrid(row.id)
                    selectLocId = row.id+"_"+row.type;
                    $('#specialDataGrid').datagrid('clearSelections');
                    specialSearch();
                },
                onLoadSuccess: function () {
//                    var rows = $("#locDataGrid").datagrid("getRows");
//                    console.log(rows[0].id);
                    loadSpecialDataGrid();
                }
            });
        }

        function loadSpecialDataGrid(id) {
            if (id == undefined) {
                id = '';
            }
            console.log("--loadSpecialDataGrid--id:" + id);
            specialDataGrid = $('#specialDataGrid').datagrid({
                url: '${path }/special/specialDataGrid.do?specialId=' + id,
                striped: true,
                rownumbers: true,
                pagination: true,
                singleSelect: true,
                idField: 'id',
                sortName: 'id',
                sortOrder: 'asc',
                pageSize: 20,
                pageList: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500],
                frozenColumns: [[{
                    width: '40',
                    title: 'id',
                    field: 'id',
                    sortable: true
                }, {
                    width: '150',
                    title: '专题位置',
                    field: 'name'
                }, {
                    width: '120',
                    title: '标题',
                    field: 'title1'
                }, {
                    width: '120',
                    title: '预留标题',
                    field: 'title2'
                }, {
                    width: '120',
                    title: '备注',
                    field: 'des1'
                }, {
                    width: '120',
                    title: '预留备注',
                    field: 'des2'
                }, {
                    width: '70',
                    title: '图片',
                    field: 'img1',
                    formatter: formatterImg
                }, {
                    width: '70',
                    title: '预留图片',
                    field: 'img2',
                    formatter: formatterImg
                }, {
                    width: '70',
                    title: '展示顺序',
                    field: 'ord'
                }, {
                    width: '50',
                    title: '类型',
                    field: 'click_type',
                    formatter: function (value, row, index) {
                        if (value == 0) {
                            return 'url';
                        } else if (value == 1) {
                            return '富文本';
                        } else {
                            return '无'
                        }
                    }
                }, {
                    width: '230',
                    title: 'url',
                    field: 'url'
                }]]
            });
        }
        function addSpecialDetailFun() {
            var select = $("#cityTreeGrid").datagrid("getSelected");
            if (select == null) {
                $.messager.alert("提示", "请先选择一个城市！", "info");
                return;
            }
            var select = $("#locDataGrid").datagrid("getSelected");
            if (select == null) {
                $.messager.alert("提示", "请先选择一个位置！", "info");
                return;
            }
            console.log("add")
            $.modalDialog({
                title: '添加专题',
                width: 1000,
                height: 800,
                id: "specialDetailAddFormPage",
                href: '${path }/special/specialAddPage.do',
            });
        }
        function editSpecialDetailFun() {
            console.log("edit")
            var select = $("#specialDataGrid").datagrid("getSelected");
            if (select == null) {
                $.messager.alert("提示", "请选择要修改的项！", "info");
                return;
            }
            $.modalDialog({
                title: '编辑专题',
                width: 1000,
                height: 800,
                id: "specialDetailEditFormPage",
                href: '${path }/special/specialEditPage.do?id=' + select.id,
            });
        }
        function deleteSpecialDetailFun() {
            console.log("deleteSpecialDetailFun");
            var select = $("#specialDataGrid").datagrid("getSelected");
            if (select == null) {
                $.messager.alert("提示", "请选择要删除的项！", "info");
                return;
            }

            $.messager.confirm('询问', '您确定要删除此分类吗?', function (b) {
                if (b) {
                    progressLoad();
                    $.post('${path }/special/specialDelete.do', {'id': select.id}, function (result) {
                        if (result.success) {
                            $.messager.alert('提示', result.msg, 'info');
                            reloadSpecialDataGrid();
                            $('#specialDataGrid').datagrid('clearSelections');
                        }
                        progressClose();
                    }, 'JSON');
                }
            });
        }

        function addLocFun() {
            $.modalDialog({
                title : '添加',
                width : 500,
                height : 350,
                href : '${path }/special/locAddPage.do',
                id:'locAddFormPage',
                buttons : [ {
                    text : '保存',
                    handler : function() {
                        $.modalDialog.openner_treeGrid = locDataGrid;//因为添加成功之后，需要刷新这个treeGrid，所以先预定义好
                        var f = $.modalDialog.handler.find('#locAddForm');
                        f.submit();
                    }
                } ]
            });
        }
        function editLocFun() {
            var select = $("#locDataGrid").datagrid("getSelected");
            if (select == null) {
                $.messager.alert("提示", "请选择要编辑的项！", "info");
                return;
            }
            $.modalDialog({
                title : '编辑',
                width : 500,
                height : 350,
                id:'locEditFormPage',
                href : '${path }/special/locEditPage.do?id='+select.id,
                buttons : [ {
                    text : '保存',
                    handler : function() {
                        $.modalDialog.openner_treeGrid = locDataGrid;//因为添加成功之后，需要刷新这个treeGrid，所以先预定义好
                        var f =$.modalDialog.handler.find('#locEditForm');
                        f.submit();
                    }
                } ]
            });
        }

        function deleteLocFun() {
            var select = $("#locDataGrid").datagrid("getSelected");
            if (select == null) {
                $.messager.alert("提示", "请选择要删除的项！", "info");
                return;
            }

            $.messager.confirm('询问', '您确定要删除此分类吗?', function (b) {
                if (b) {
                    progressLoad();
                    $.post('${path }/special/locDelete.do', {'id': select.id}, function (result) {
                        if (result.success) {
                            $.messager.alert('提示', result.msg, 'info');
                            reloadLocDataGrid();
                            $('#locDataGrid').datagrid('clearSelections');

                        }
                        progressClose();
                    }, 'JSON');
                }
            });
        }

        //位置查询
        function locSearch(){

            var queryParams = {};
            queryParams.typeValue=typeStr;

            var select = $("#cityTreeGrid").datagrid("getSelected");
            if (select == null) {
                queryParams.specialCityIdSearchWord ="";
            }else{
                queryParams.specialCityIdSearchWord =select.id;
            }
            queryParams.locPlatformSearchWord =$("#locPlatformSearchWord").combobox('getValue');
            queryParams.locTypeSearchWord =$("#locTypeSearchWord").combobox('getValue');
            queryParams.locNameSearchWord =$("#locNameSearchWord").val();
            var options = $("#locDataGrid").datagrid('getPager').data("pagination").options;
            options.pageNumber = 1;
            //重新加载
            $("#locDataGrid").datagrid('options').url = "${path }/special/locDataGrid.do";
            $("#locDataGrid").datagrid('options').queryParams = queryParams;
            $("#locDataGrid").datagrid('reload');
        }
        function resetLocSearch() {

            $("#locPlatformSearchWord").combobox("setValue","");
            $("#locTypeSearchWord").combobox("setValue","");
            $("#locNameSearchWord").val("");
        }

        //专题查询
        function specialSearch(){

            var queryParams = {};

            var select = $("#cityTreeGrid").datagrid("getSelected");
            if (select == null) {
                queryParams.specialCityIdSearchWord ="";
            }else{
                queryParams.specialCityIdSearchWord =select.id;
            }

            var select = $("#locDataGrid").datagrid("getSelected");
            if (select == null) {
                queryParams.specialLocIdSearchWord ="";
            }else{
                queryParams.specialLocIdSearchWord =select.id;
            }
            queryParams.specialTypeSearchWord =$("#specialTypeSearchWord").combobox('getValue');
            queryParams.specialTitleSearchWord = $("#specialTitleSearchWord").val();
            queryParams.specialDesSearchWord =$("#specialDesSearchWord").val();
            var options = $("#specialDataGrid").datagrid('getPager').data("pagination").options;
            options.pageNumber = 1;
            //重新加载
            $("#specialDataGrid").datagrid('options').url = "${path }/special/specialDataGrid.do";
            $("#specialDataGrid").datagrid('options').queryParams = queryParams;
            $("#specialDataGrid").datagrid('reload');
        }
        function resetSpecialSearch() {

            $("#specialTypeSearchWord").combobox("setValue","");
            $("#specialTitleSearchWord").val("");
            $("#specialDesSearchWord").val("");
        }


    </script>
</head>
<body>
<div class="easyui-layout" fit="true">
    <!--west分类列表start-->
    <div data-options="region:'west',split:true,border:false" title="城市列表" style="width:10%;">

        <table id="cityTreeGrid"></table>

    </div>

    <div data-options="region:'center',split:true,border:false" title="">
        <div class="easyui-layout" data-options="fit:true">

            <div data-options="region:'west',split:true,border:false" title="位置列表" style="width:25%;">
                <table id="locDataGrid">
                   <%-- <shiro:hasPermission name="/special/locAddPage.do">
                        <a onclick="addLocFun();" href="javascript:void(0);" class="easyui-linkbutton"
                           data-options="plain:true,iconCls:'fi-plus icon-green'">添加</a>
                    </shiro:hasPermission>
                    <shiro:hasPermission name="/special/locEditPage.do">
                        <a onclick="editLocFun();" href="javascript:void(0);" class="easyui-linkbutton"
                           data-options="plain:true,iconCls:'fi-pencil icon-green'">编辑</a>
                    </shiro:hasPermission>
                    <shiro:hasPermission name="/special/locDelete.do">
                        <a onclick="deleteLocFun();" href="javascript:void(0);" class="easyui-linkbutton"
                           data-options="plain:true,iconCls:'fi-x icon-green'">删除</a>
                    </shiro:hasPermission>--%>

                    <br/>
                    平台:<select id="locPlatformSearchWord" name="locPlatformSearchWord" class="easyui-combobox" data-options="width:90,editable:false,panelHeight:'auto'">
                            <option value="">全部</option>
                            <option value="0">手机WAP</option>
                            <option value="1">PC</option>
                            <option value="2">APP</option>
                        </select>
                    分类:<select id="locTypeSearchWord" name="locTypeSearchWord" class="easyui-combobox" data-options="width:80,editable:false,panelHeight:'auto'">
                            <option value="">全部</option>
                            <option value="0">轮播图</option>
                            <option value="1">分类</option>
                            <option value="2">专题</option>
                        </select>
                    <br/>
                    位置:<input type="text" id="locNameSearchWord" name="locNameSearchWord"/>

                    &nbsp;
                    <input type="button" class="easyui-linkbutton " value="重置" onclick="resetLocSearch();"/>
                    &nbsp;
                    <input type="button" class="easyui-linkbutton" value="搜索" onclick="locSearch();"/>
                </table>
            </div>

            <div data-options="region:'center',split:true,border:false" title="专题列表">
                <table id="specialDataGrid">
                    <shiro:hasPermission name="/special/specialAddPage.do">
                        <a onclick="addSpecialDetailFun();" href="javascript:void(0);" class="easyui-linkbutton"
                           data-options="plain:true,iconCls:'fi-plus icon-green'">添加</a>
                    </shiro:hasPermission>
                    <shiro:hasPermission name="/special/specialEditPage.do">
                        <a onclick="editSpecialDetailFun();" href="javascript:void(0);" class="easyui-linkbutton"
                           data-options="plain:true,iconCls:'fi-pencil icon-green'">编辑</a>
                    </shiro:hasPermission>
                    <shiro:hasPermission name="/special/specialDelete.do">
                        <a onclick="deleteSpecialDetailFun();" href="javascript:void(0);" class="easyui-linkbutton"
                           data-options="plain:true,iconCls:'fi-x icon-green'">删除</a>
                    </shiro:hasPermission>

                    类型:<select id="specialTypeSearchWord" name="specialTypeSearchWord" class="easyui-combobox" data-options="width:60,editable:false,panelHeight:'auto'">
                            <option value="">全部</option>
                            <option value="0">url</option>
                            <option value="1">富文本</option>
                            <option value="2">无</option>
                      </select>

                    标题:<input type="text" id="specialTitleSearchWord" name="specialTitleSearchWord"/>

                    备注:<input type="text" id="specialDesSearchWord" name="specialDesSearchWord"/>


                    <div style="position: relative;display: inline;margin-left: 2px">
                        <input type="button" class="easyui-linkbutton " value="重置" onclick="resetSpecialSearch();"/>
                        &nbsp;
                        <input type="button" class="easyui-linkbutton" value="搜索" onclick="specialSearch();"/>
                    </div>

                </table>
            </div>

        </div>
    </div>

</div>
</body>
</html>
